<template>
	<view id="box">
		<view class="revice_address_row">

			<!-- 当收货地址 存在 详细信息就显示 -->
			<view class="user_info_row">
				<view class="user_info">
					<view>{{address.userName}}</view>
					<view>{{address.provinceName}}{{address.cityName}}{{address.countyName}}{{address.detailInfo}}
					</view>
				</view>
				<view class="user_phone">{{address.telNumber}}</view>
			</view>
		</view>

		<view class="cart_content">
			<view class="cart_title">购物车</view>
			<view class="cart_main">
				<view class="cart_item" v-for="item in cart" :key="item.id">
				
					<!-- 商品图片 -->
					<navigator class="cart_img_wrap" :url="`/pages/goodDetail/goodDetail?goods_id=${item.id}`">
						<image mode="widthFix" :src="item.smallLogo"></image>
					</navigator>
					<!-- 商品信息 -->
					<view class="cart_info_wrap">
						<view class="goods_name">{{item.name}}</view>
						<view class="goods_price_wrap">
							<view class="goods_price">￥{{item.price}}</view>
							<view class="cart_num_tool">
							  <view class="goods_num">X {{item.num}}</view>
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>

		<!-- 底部工具栏 -->
		<view class="footer_tool">
			<!-- 总价格 -->
			<view class="total_price_wrap">
				<view class="total_price">
					合计: <text class="total_price_text">￥{{totalPrice}}</text>
				</view>
				<view>包含运费</view>
			</view>
			<!-- 结算 -->
			<view class="order_pay_wrap" @click="handleOrderPay">
				支付({{totalNum}})
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "../../utils/api.js";
	import {requestPayment} from '../../utils/asyncUni.js'
	export default {
		data() {
			return {
				address: {},
				cart: [],
				totalPrice: 0,
				totalNum: 0
			};
		},
		onShow() {
			this.address = uni.getStorageSync("address")
			this.cart = uni.getStorageSync("cart") || [];
			this.cart = this.cart.filter(v => v.checked)
			this.totalPrice = 0
			this.totalNum = 0
			this.cart.forEach(v => {
				this.totalPrice += v.num * v.price;
				this.totalNum += v.num
			})
		},
		methods: {
			async handleOrderPay(){
				try{
					const token=uni.getStorageSync('token');
					if(!token){
						uni.navigateTo({url:'/pages/auth/auth'})
						console.log(1)
						return;
					}
					let goods=[];
					this.cart.forEach(v=>goods.push({
						goods_id:v.id,
						goods_number:v.num,
						goods_price:v.price
					}))
					const data={
						order_price:this.totalPrice,
						consignee_addr:this.address.all,
						goods
					}
					const {order_number}=await request({url:'/my/orders/create',method:'POST',data})
					const { pay } = await request({ url: "/my/orders/req_unifiedorder", method: "POST", data: { order_number } });
					await requestPayment(pay);
					const res = await request({ url: "/my/orders/chkOrder", method: "POST", data: { order_number } });
					uni.showToast({
						title:'支付成功'
					})
					this.cart=this.cart.filter(v=>!v.checked)
					uni.setStorageSync("cart",this.cart)
					uni.navigateTo({
						url:'/pages/order/order'
					})
				}catch(err){
					uni.showToast({
						title:"支付失败"
					})
					console.log(err)
				}
			}
		}


	}
</script>

<style lang="scss" scoped>
	#box {
		font-size: 28rpx;

		padding-bottom: 120rpx;

	}

	.revice_address_row {
		.address_btn {
			padding: 20rpx;

			button {
				width: 60%;
			}
		}

		.user_info_row {
			display: flex;
			padding: 20rpx;

			.user_info {
				font-size: 28rpx;
				flex: 5;
			}

			.user_phone {
				font-size: 28rpx;
				flex: 3;
				text-align: right;
			}
		}
	}

	.cart_content {
		.cart_title {
			padding: 20rpx;
			font-size: 36rpx;
			color: $theme-color;
			border-top: 1rpx solid currentColor;
			border-bottom: 1rpx solid currentColor;
		}

		.cart_main {
			.cart_item {
				display: flex;
				padding: 10rpx;
				border-bottom: 1rpx solid #ccc;

				.cart_chk_wrap {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

					checkbox-group {
						checkbox {}
					}
				}

				.cart_img_wrap {
					flex: 2;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 80%;
					}
				}

				.cart_info_wrap {
					flex: 4;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.goods_name {
						display: -webkit-box;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						color: #666;
					}

					.goods_price_wrap {
						display: flex;
						justify-content: space-between;

						.goods_price {
							color: $theme-color;
							font-size: 34rpx;
						}

						.cart_num_tool {
							display: flex;

							.num_edit {
								width: 55rpx;
								height: 55rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								border: 1rpx solid #ccc;
							}

							.goods_num {
								width: 55rpx;
								height: 55rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}
				}
			}
		}
	}

	.footer_tool {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		display: flex;
		border-top: 1rpx solid #ccc;

		.all_chk_wrap {
			flex: 2;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.total_price_wrap {
			flex: 5;
			padding-right: 15rpx;
			text-align: right;

			.total_price {
				.total_price_text {
					color: $theme-color;
					font-size: 34rpx;
					font-weight: 600;
				}
			}

		}

		.order_pay_wrap {
			flex: 3;
			background-color: $theme-color;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
